<template>
    <div class="zw-layout" v-if="isLogin">
        <ZWHeader />
        <el-scrollbar class="main-scrollbar">
            <!-- <router-view /> -->
            <router-view v-slot="{ Component }">
                <keep-alive :include="['SMART_REPLY_LIST']">
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </el-scrollbar>
    </div>
    <div class="zw-layout" v-else>
        <router-view />
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, onMounted } from 'vue'
import ZWHeader from './ZWHeader.vue'
import { useStore } from '@renderer/store'

const store = useStore()

const isLogin = computed(() => {
    return store.getters['common/isLogin']
})


let height = ref<string>('')
const calcHeight = () => {
    height.value = `${document.documentElement.clientHeight - 186}px`
}
window.addEventListener('resize', () => {
    calcHeight()
}, true)

onMounted(() => {
    calcHeight()
})

</script>

<style lang="scss" scoped>
.zw-layout {
    height: calc(100vh - 30px);
    margin-top: 30px;

    .main-scrollbar {
        height: v-bind(height);
        background-color: #fff;
        margin: 20px;
        padding: 20px;
        box-shadow: 0 0 20px #ddd;
        box-sizing: border-box;
    }
}
</style>
